<!--
 * @Description: 
 * @Autor: dongjunhua
 * @Date: 2020-12-28 09:09:40
 * @LastEditors: Qun
 * @LastEditTime: 2021-09-10 16:07:21
-->
<template>
  <div class="app-container">
    <el-row class="box">
      <el-col :span="12">
        使用
        <el-button type="primary" link @click="open">
          driver.js
        </el-button>
        实现引导
      </el-col>
      <el-col :span="12">
        <el-button @click="startMenu" type="primary">
          操作栏引导
        </el-button>
        <el-button @click="start" type="primary">
          演示
        </el-button>
      </el-col>
    </el-row>
    <el-row class="box">
      <el-col :span="12">
        <el-button class="step-1">操作1</el-button>
      </el-col>
      <el-col :span="12">
        <el-button class="step-2">操作2</el-button>
      </el-col>
    </el-row>
    <el-row class="box box-buttom">
      <el-col :span="12">
        <el-button class="step-3">操作3</el-button>
      </el-col>
      <el-col :span="12">
        <el-button class="step-4">操作4</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Driver from 'driver.js';
export default {
  name: 'Driver',
  setup() {
    const driver = new Driver({
      prevBtnText: '上一步',
      nextBtnText: '下一步',
      doneBtnText: '我知道了',
      closeBtnText: '退出引导',
      allowClose: false,
      stageBackground: 'transparent',
      opacity: 0.7
    });

    const startMenu = () => {
      driver.defineSteps([
        {
          element: '.sidebar-container',
          popover: {
            title: '操作栏引导',
            description: '这是侧边导航菜单',
            position: 'right',
            offset: 20
          }
        },
        {
          element: '.navbar-container',
          popover: {
            title: '操作栏引导',
            description: '这是顶部导航菜单',
            position: 'buttom',
            offset: 20
          }
        },
        {
          element: '.navigation-container',
          popover: {
            title: '操作栏引导',
            description: '这是横向操作栏',
            position: 'buttom',
            offset: 20
          }
        },
        {
          element: '.tags-view-container',
          popover: {
            title: '操作栏引导',
            description: '这是标签导航',
            position: 'buttom',
            offset: 20
          }
        }
      ]);
      driver.start();
    };
    const start = () => {
      driver.defineSteps([
        {
          element: '.step-1',
          popover: {
            title: '步骤1',
            description: '这是第一个步骤',
            position: 'right'
          }
        },
        {
          element: '.step-2',
          popover: {
            title: '步骤2',
            description: '这是第二个步骤',
            position: 'left'
          }
        },
        {
          element: '.step-3',
          popover: {
            title: '步骤3',
            description: '这是第三个步骤',
            position: 'top'
          }
        },
        {
          element: '.step-4',
          popover: {
            title: '步骤4',
            description: '这是第四个步骤',
            position: 'top'
          }
        }
      ]);
      driver.start();
    };
    return {
      open: () => window.open('https://github.com/kamranahmedse/driver.js'),
      startMenu,
      start
    };
  }
};
</script>
<style lang="scss" scoped>
.app-container {
  margin: 20px;
  padding: 0;
  .box {
    padding: 20px;
    background-color: #ffffff;
    margin-bottom: 20px;
  }
  .box-buttom {
    margin-top: 100vh;
  }
}
</style>
<style>
div#driver-highlighted-element-stage {
  max-height: 100vh;
  margin: -10px;
}
</style>
